//获取到底部索引区域ID为:index_bottom_tab的元素
let index_bottom_tab = document.getElementById("index_bottom_tab");
//将获取到底部索引区域的元素的集合赋给listtab
let listtab = index_bottom_tab.children;
//获取到ID为：index_food_long的元素
let index_food_long = document.getElementById("index_food_long");
let time;
//必须要将这个计数器设置为零 会导致第一次循环不成功，因为children[0]已经被赋予类名了
let counter = 0;
let listtab_length = listtab.length;
//第一次循环将鼠标指向的区域添加鼠标移入事件

for (let i = 0; i < listtab_length; i++) {
    //将每个元素下标索引都记录下来
    listtab[i].index = i;
    //将鼠标指向的区域添加移入事件
    listtab[i].onmouseover = function () {
        //用来记录当前指向区域的下标并且赋值给indexs，用来传入其他函数(传参)
        var indexs = this.index;
        //如果indexs等于前面的数加一或者等于前面的数字减一，才进行移动，否则不做任何反应
        if (indexs == counter + 1 || indexs == counter - 1) {
            if (counter < indexs) {
                //每次调用移动函数前都要清除一次定时器
                clearInterval(time);
                //调用头部导航的封装移动函数
                directionLR(counter, indexs);
                //alert("往左边移动了!");
            } else if (counter > indexs) {
                //每次调用移动函数前都要清除一次定时器
                clearInterval(time);
                directionLR(counter, indexs);
                //alert("往右边移动了!");
            }
            for (var j = 0; j < listtab_length; j++) {
                listtab[j].className = "times";
            }
            //将鼠标移入的当前区域的索引赋值给counter 方便下次循环时，将鼠标移入的当前区域的索引和上一个索引进行比较
            counter = this.index;
            this.className = "times topn";
            //alert("当前为第：" + counter + "个元素");
        } else {
            return false;
        }
    }
}
// alert(i);

//此函数是运动函数，只需要传入上一个区域的下标和当前区域的下标就可以进行比较判断是向左移动还是向右移动
/**
 * @param counters 上一个索引区的下标
 * @param CurrentSubscript 当前索引区的下标
 */
function directionLR(counters, CurrentSubscript) {
    //使用定时器每运行一次，长盒子运动一次
    time = setInterval(function () {
        //获取长盒子距离它的父亲的左边有多少距离
        var leader = index_food_long.offsetLeft;
        //相当于运动速度
        var seep = 10;
        //如果鼠标指到区域的索引值小于当前显示区域的索引值，就往左边移动，反之就往右边移动
        counters < CurrentSubscript ? leader = leader - seep : leader = leader + seep;
        //当leader递减的时候同时赋值给长盒子的内联样式left值
        index_food_long.style.left = leader + "px";
        //如果长盒子的距离减到 负2970或者加到负990时，关闭定时器，并且将它复回原位
        if (leader <= -2970 || leader >= -990) {
            //因为要等整体的大盒子移动完，才能将各个小盒子的位置赋予它，if判断它是在前边
            if (counters < CurrentSubscript) {
                //使用选择语句设置：如果鼠标指向区域大于之前的区域就改变左移后每个盒子的位置，否则的话执行下边的语句
                switch (CurrentSubscript) {
                    case 0:
                        prev_btn.style.backgroundPosition = "0px -364px";
                        nextpage_btn.style.backgroundPosition = "-174px -142px";
                        index_food_long.children[0].className = "food_item food_item_1";
                        index_food_long.children[1].className = "food_item food_item_2";
                        index_food_long.children[2].className = "food_item food_item_3";
                        index_food_long.children[3].className = "food_item food_item_4";
                        index_food_long.children[4].className = "food_item food_item_5";
                        break;
                    case 1:
                        prev_btn.style.backgroundPosition = "0px -68px";
                        nextpage_btn.style.backgroundPosition = "-174px -216px";
                        index_food_long.children[0].className = "food_item food_item_5";
                        index_food_long.children[1].className = "food_item food_item_1";
                        index_food_long.children[2].className = "food_item food_item_2";
                        index_food_long.children[3].className = "food_item food_item_3";
                        index_food_long.children[4].className = "food_item food_item_4";
                        break;
                    case 2:
                        prev_btn.style.backgroundPosition = "0px -142px";
                        nextpage_btn.style.backgroundPosition = "-174px -290px";
                        index_food_long.children[0].className = "food_item food_item_4";
                        index_food_long.children[1].className = "food_item food_item_5";
                        index_food_long.children[2].className = "food_item food_item_1";
                        index_food_long.children[3].className = "food_item food_item_2";
                        index_food_long.children[4].className = "food_item food_item_3";
                        break;
                    case 3:
                        prev_btn.style.backgroundPosition = "0px -216px";
                        nextpage_btn.style.backgroundPosition = "-174px -364px";
                        index_food_long.children[0].className = "food_item food_item_3";
                        index_food_long.children[1].className = "food_item food_item_4";
                        index_food_long.children[2].className = "food_item food_item_5";
                        index_food_long.children[3].className = "food_item food_item_1";
                        index_food_long.children[4].className = "food_item food_item_2";
                        break;
                    case 4:
                        prev_btn.style.backgroundPosition = "0px -290px";
                        nextpage_btn.style.backgroundPosition = "-174px -68px";
                        index_food_long.children[0].className = "food_item food_item_2";
                        index_food_long.children[1].className = "food_item food_item_3";
                        index_food_long.children[2].className = "food_item food_item_4";
                        index_food_long.children[3].className = "food_item food_item_5";
                        index_food_long.children[4].className = "food_item food_item_1";
                        break;
                }
            } else {
                switch (CurrentSubscript) {
                    case 0:
                        prev_btn.style.backgroundPosition = "0px -364px";
                        nextpage_btn.style.backgroundPosition = "-174px -142px";
                        index_food_long.children[0].className = "food_item food_item_1";
                        index_food_long.children[1].className = "food_item food_item_2";
                        index_food_long.children[2].className = "food_item food_item_3";
                        index_food_long.children[3].className = "food_item food_item_4";
                        index_food_long.children[4].className = "food_item food_item_5";
                        break;
                    case 1:
                        prev_btn.style.backgroundPosition = "0px -68px";
                        nextpage_btn.style.backgroundPosition = "-174px -216px";
                        index_food_long.children[0].className = "food_item food_item_5";
                        index_food_long.children[1].className = "food_item food_item_1";
                        index_food_long.children[2].className = "food_item food_item_2";
                        index_food_long.children[3].className = "food_item food_item_3";
                        index_food_long.children[4].className = "food_item food_item_4";
                        break;
                    case 2:
                        prev_btn.style.backgroundPosition = "0px -142px";
                        nextpage_btn.style.backgroundPosition = "-174px -290px";
                        index_food_long.children[0].className = "food_item food_item_4";
                        index_food_long.children[1].className = "food_item food_item_5";
                        index_food_long.children[2].className = "food_item food_item_1";
                        index_food_long.children[3].className = "food_item food_item_2";
                        index_food_long.children[4].className = "food_item food_item_3";
                        break;
                    case 3:
                        prev_btn.style.backgroundPosition = "0px -216px";
                        nextpage_btn.style.backgroundPosition = "-174px -364px";
                        index_food_long.children[0].className = "food_item food_item_3";
                        index_food_long.children[1].className = "food_item food_item_4";
                        index_food_long.children[2].className = "food_item food_item_5";
                        index_food_long.children[3].className = "food_item food_item_1";
                        index_food_long.children[4].className = "food_item food_item_2";
                        break;
                }
            }
            clearInterval(time);
            index_food_long.style.left = -1980 + "px";
        }
    }, 1);
}